//@flow

/**
 * 包含 注册、忘记密码、第三方登陆的组件
 */

import React, { Component } from 'react';
import { 
    View,
    StyleSheet,
    Text,
    TouchableHighlight,
    ViewStyle,
 } from 'react-native';
import { safeAreaHOC } from '../../base/safeAreaHOC';
import { ThirdPartLogin } from '../../util/thirdPartManager/thirdPartLogin';
import { Navigate } from '../../common/navigate';

type Props = {
    style : ViewStyle,
}

class MoreFunc extends Component <Props,{}>{
    /**渲染 注册、忘记密码按钮 */
    renderRegisterAndForget(){
        return (
            <View style={{width:'100%',flexDirection:'row',justifyContent:'center'}}>
                <TouchableHighlight 
                    onPress={()=>{Navigate.navigate('Register')}}
                    style={{alignItems:'flex-end',justifyContent:'center'}}>
                    <Text style={{color:'white'}}>注册 |</Text>
                </TouchableHighlight>
                
                <TouchableHighlight style={{alignItems:'flex-start',justifyContent:'center'}}>
                    <Text style={{color:'white'}}> 忘记密码?</Text>
                </TouchableHighlight>
            </View>
        )
    }
    /**分割线 */
    renderSepline(){
        return(
            <View style={styles.sepContainer}>
                <View style={styles.sepline}/>
                <Text style={styles.sepTextColor}> or </Text>
                <View style={styles.sepline}/>
            </View>
        )
    }
    render(){
        return(
            <View style={[styles.container]}>
                {this.renderRegisterAndForget()}
                {this.renderSepline()}
                <ThirdPartLogin />
            </View>
        )
    }
}
MoreFunc = safeAreaHOC(MoreFunc,'bottom')
export {MoreFunc}
const styles = StyleSheet.create({
    sepContainer:{
        flexDirection:'row',
        alignItems:'center'
    },
    sepline : {
        flex:1,
        height:1,
        borderRadius: 1.5,
        backgroundColor: 'white',
    },
    sepTextColor: {
        color:'white',
        fontSize:15,
    },
    container:{
        // // bottom:0,
        // width:'100%',
        backgroundColor: 'rgba(0,0,0,0)',
        paddingBottom: 30,
    }
})